<template>
	<sys-container :label="'会员个人中心'" :withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="bgCir">

				</view>
				<view class="userCard">
					<view class="avator">
						<image :src="userInfo.avatar" mode="widthFix" style="width:100%;height:100%"
							v-if="userInfo.avatar"></image>
					</view>
					<view class="infoDesc">
						<view class="leftInfo">
							<view class="userName">
								{{userInfo.account}}
							</view>
							<view class="phone">
								<image src="../../static/images/icon/phone.png" mode="widthFix"
									style="width:24rpx;margin-right:5rpx"></image>
								<text>{{userInfo.phone}}</text>
							</view>
						</view>
						<view class="changeAccount" @tap="relog">
							切换账号>
						</view>
					</view>
				</view>

				<view class="vip">
					<view class="singleVIP">
						<view class="labelIcon">
							<image src="../../static/images/personal/icon-hy1.png" mode="widthFix" style="width:100%">
							</image>
						</view>
						<view class="vipMain">
							<view class="vipDesc">
								<view class="descTit">
									您已拥有【中级消防监控中级理论】
								</view>
								<view class="timeLeft">
									有效期剩余：<text style="color:#DA2627">{{getLastDayFromNow(userInfo.jkll_time)}}天</text>
								</view>
							</view>
							<u-button
								:custom-style="{width:'120rpx',height:'42rpx',borderRadius:'42rpx',color:'#da2627',padding:'0'}"
								@tap="giveMon(1)">续费</u-button>

						</view>
					</view>
					<view class="singleVIP">
						<view class="labelIcon">
							<image src="../../static/images/personal/icon-hy2.png" mode="widthFix" style="width:100%">
							</image>
						</view>
						<view class="vipMain">
							<view class="vipDesc">
								<view class="descTit">
									您已拥有【中级消防维保中级理论】
								</view>
								<view class="timeLeft">
									有效期剩余：<text style="color:#DA2627">{{getLastDayFromNow(userInfo.wbll_time)}}天</text>
								</view>
							</view>
							<u-button
								:custom-style="{width:'120rpx',height:'42rpx',borderRadius:'42rpx',color:'#da2627',padding:'0'}"
								@tap="giveMon(3)">续费</u-button>
						</view>
					</view>
					<view class="singleVIP">
						<view class="labelIcon">
							<image src="../../static/images/personal/icon-hy3.png" mode="widthFix" style="width:100%">
							</image>
						</view>
						<view class="vipMain">
							<view class="vipDesc">
								<view class="descTit">
									您已拥有【中级消防监控中级理论】
								</view>
								<view class="timeLeft">
									有效期剩余：<text style="color:#DA2627">{{getLastDayFromNow(userInfo.jkll_time)}}天</text>
								</view>
							</view>
							<u-button
								:custom-style="{width:'120rpx',height:'42rpx',borderRadius:'42rpx',color:'#da2627',padding:'0'}"
								click="giveMon(1)">续费</u-button>
						</view>
					</view>
				</view>


				<view class="vipService">
					<view class="serviceTit">
						<text>会员服务</text>
						<text class="seeMore">查看更多 ></text>
					</view>
					<view class="funBtnBox">
						<u-grid :border="false">
							<u-grid-item span="8">
								<view class="singleFun" @tap="toMyOrder">
									<view class="funIcon">
										<image src="@/static/images/personal/vip-1.png" mode="widthFix"
											style="width:100%"></image>
									</view>
									<view class="funTit">
										我的订单
									</view>
								</view>
							</u-grid-item>
							<u-grid-item span="8">
								<view class="singleFun" @tap="toMistake">
									<view class="funIcon">
										<image src="@/static/images/personal/vip-2.png" mode="widthFix"
											style="width:100%"></image>
									</view>
									<view class="funTit">
										错题练习
									</view>
								</view>
							</u-grid-item>
							<u-grid-item span="8">
								<view class="singleFun" @tap="jump('/distribution/index/index')">
									<view class="funIcon">
										<image src="@/static/images/personal/vip-3.png" mode="widthFix"
											style="width:100%"></image>
									</view>
									<view class="funTit">
										我的分销
									</view>
								</view>
							</u-grid-item>
							<u-grid-item span="8">
								<view class="singleFun" @tap="jump('/distribution/myCode/myCode')">
									<view class="funIcon">
										<image src="@/static/images/personal/vip-4.png" mode="widthFix"
											style="width:100%"></image>
									</view>
									<view class="funTit">
										分销码
									</view>
								</view>
							</u-grid-item>
							<u-grid-item span="8">
								<view class="singleFun" @click="contactToUs">
									<view class="funIcon">
										<image src="@/static/images/personal/vip-5.png" mode="widthFix"
											style="width:100%"></image>
									</view>
									<view class="funTit">
										联系客服
									</view>
								</view>
							</u-grid-item>
						</u-grid>

					</view>
				</view>
				<!-- <van-overlay :show="showFlag" @click="onClickHide">
				  <view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
				    <view class="block" style="width:100%;max-height:1000rpx;background: #fff;overflow: auto;padding:20rpx 0;">
						<view class="" style="color:#DA2627;font-size: 46rpx;font-weight:bolder;text-align: center;">
							我的订单
						</view>
						<view class="singleOrder" v-for="(item,index) in payOrder" :key="index" style="display:flex;align-items: center;border-bottom: 2rpx solid #ccc;justify-content: space-around;padding:20rpx 0">
							<view class="">
								<view class="">
									订单号：{{item.order_id}}
								</view>
								<view class="">
									购买时间：{{formatTime(item.pay_time,'yyyy-MM-dd HH:mm:ss')}}
								</view>
							</view>
							<view class="" style="font-size:42rpx;color:red">
								{{item.pay_price}}
							</view>
							
						</view>
						
					</view>
				  </view> -->

				<!-- </van-overlay> -->
				<u-mask :show="showFlag2" @click="onClickHide2">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block"
							style="width:100%;max-height:1000rpx;background: #fff;overflow: auto;padding:20rpx 0;">
							<view class=""
								style="color:#DA2627;font-size: 46rpx;font-weight:bolder;text-align: center;">
								联系电话 ：<text @click.native="takePhone" style="color: aqua;">18520213158</text>
							</view>


						</view>
					</view>

				</u-mask>
				<!-- <van-dialog id="van-dialog" /> -->
			</view>
		</template>
	</sys-container>
</template>

<script>
	import {
		memberInfo,
		memberShip,
		orderList
	} from '@/globalApi/requestApi.js'
	import {
		getLastDayFromNow
	} from '@/util/index.js'
	// import Dialog from '@/wxcomponents/@vant/weapp/dialog/dialog';
	const app = getApp()
	export default {
		data() {
			return {
				userInfo: {
					avatar: ''
				},
				userAvator: '',
				memberList: [],
				// showFlag:false,
				payOrder: [],
				showFlag2: false,
				getLastDayFromNow
			}
		},
		onLoad() {

			// this.userInfo = uni.getStorageSync('user')
			memberShip().then(res => {
				if (res.code == 200) {
					this.memberList = res.data
				}
			})
		},

		onShow() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary')
			// #endif
			this.getUserInfo()
		},
		methods: {
			takePhone() {
				uni.makePhoneCall({
					phoneNumber: '18520213158', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			onClickHide2() {
				this.showFlag2 = false
			},
			contactToUs() {
				this.showFlag2 = true
				console.log(123)
			},
			onClickHide() {
				this.showFlag = false
			},
			toMyOrder() {
				// this.showFlag = true
				uni.navigateTo({
					url: '/pages/package/orderList/orderList'
				})

			},
			giveMon(id) {
				var data = this.memberList.find(item => {
					return item.id == id
				})
				uni.navigateTo({
					url: '../package/buyPackage/buyPackage?data=' + JSON.stringify(data)
				})
			},
			relog() {
				this.$showModal2({
					title: '您确认切换账号吗？',
					// content: '这是一个模态弹窗',

				}).then(() => {

					uni.removeStorageSync('user')
					uni.removeStorageSync('token')
					uni.redirectTo({
						url: '../login/login'
					})

				})

			},
			getUserInfo() {
				memberInfo().then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
						this.userInfo.avatar = app.globalData.requestUrl + res.data.avatar
					}
				})
			},
			jump(path) {
				uni.navigateTo({
					url: '/pages' + path
				})
			},
			goPackageSelect() {
				uni.navigateTo({
					// url:'../package/packageSelect/packageSelect'
					url: '../package/buyPackage/buyPackage'
				})
			},
			toMistake() {
				uni.navigateTo({
					url: '../produceAndTest/mistakePage/mistakePage'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		height: 100%;
		position: relative;
		padding: 70rpx 35rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;
		// overflow: hidden;
		// z-index: 1;

		.bgCir {
			width: 100%;
			height: 200rpx;
			background: linear-gradient(-90deg, #D10202, #F82A08);
			border-radius: 0 0 30% 30%/0rpx 0rpx 30rpx 30rpx;
			position: absolute;
			left: 0;
			top: 0;
			// z-index: 1
		}

		.userCard {
			position: relative;
			box-sizing: border-box;
			width: 680rpx;
			background: #fff;
			height: 190rpx;
			box-shadow: 1rpx 3rpx 17rpx 0rpx rgba(9, 2, 4, 0.09);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0 30rpx 12rpx;
			z-index: 1;

			.avator {
				width: 125rpx;
				height: 125rpx;
				background: yellow;
				border-radius: 50%;
			}

			.infoDesc {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// height:80rpx;
				margin-left: 25rpx;

				.userName {
					font-size: 30rpx;
					font-weight: bold;
					color: #222222;
					margin-bottom: 24rpx;
				}

				.phone {
					display: flex;
					align-items: center;
				}

				.changeAccount {
					width: 181rpx;
					height: 58rpx;
					background: #1949ff;
					border-radius: 30rpx 0 0 30rpx;
					text-align: center;
					line-height: 58rpx;
					color: white;
					font-size: 25rpx;
				}
			}


		}

		.vip {
			width: 100%;
			padding: 12rpx 26rpx 38rpx 8rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			box-sizing: border-box;

			.singleVIP {
				padding: 30rpx 5rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.labelIcon {
					width: 92rpx;
					height: 124rpx;
					display: flex;
					align-items: center;
					padding: 0 10rpx;
					box-sizing: border-box;
				}

				.vipMain {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.vipDesc {
						.descTit {
							font-size: 26rpx;
							font-weight: 400;
							color: #222222;
						}

						.timeLeft {
							font-size: 18rpx;
							font-weight: 400;
							color: #888888;
							margin-top: 12rpx;
						}
					}
				}

			}
		}


		.vipService {
			padding: 30rpx 38rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			width: 100%;

			.serviceTit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 29rpx;
				font-weight: 400;
				color: #222222;

				.seeMore {
					font-size: 25rpx;
					font-weight: 400;
					color: #666666;
				}

				.seeMore::active {
					color: #D10202;
				}
			}

			.funBtnBox {
				margin-top: 20rpx;
				padding: 12rpx 0rpx;

				.singleFun {
					width: 100%;
					display: flex;
					// align-items: center;
					justify-content: flex-start;
					flex-direction: column;
					align-items: center;
					padding: 30rpx 0;
					box-sizing: border-box;

					.funIcon {
						width: 70rpx;
						height: 70rpx;
						// background: red;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.funTit {
						margin-top: 25rpx;
					}
				}
			}
		}
	}
</style>